<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="page-head tc">完善简历提高录取率：已完成{{resume.complete_percent || 0}}%</view>
			<view class="pt88 plr30 pb30">
				<view class="box1">
					<view class="flex-box lh48">
						<view class="flex-grow-1 fwb fs34 col3">基本信息<text style="color: red;">（必填）</text></view>
						<view class="flex-box" @click="bindEditPersonalInfo">
							<image :src="iconPath('edit.png')" mode="widthFix" class="ico24"></image>
							<view class="pl5 col2">编辑</view>
						</view>
					</view>
					<view class="flex-box mt35 pb40 bb">
						<image :src="resume.personal.avatar||'https://admin.mosizp.cnhttps://admin.mosizp.cn/static/public/avatar.png'" mode="aspectFill"
							class="user_img"></image>
						<view class="flex-grow-1 pl20">
							<view class="fs36 fwb col3 lh50 m-ellipsis">{{resume.personal.realname}}</view>
							<view class="mt15 col9 fs24 lh32">
								<text v-if="resume.personal.gender_text">{{resume.personal.gender_text}}</text>
								<text v-if="resume.personal.age">｜{{resume.personal.age}}岁</text><text
									v-if="resume.personal.current_address">｜{{resume.personal.current_address}}</text>
								<text
									v-if="resume.personal.work_experience">｜{{resume.personal.work_experience.name}}</text>
							</view>
						</view>
					</view>
					<view class="mt20 col3 fs26 col3 lh60">手机号码:<text class="pl10">{{resume.personal.mobile || ''}}</text>
					</view>
					<view class="mt10 col3 fs26 col3 lh60">求职状态:<text
							class="pl10">{{resume.personal.current_state && resume.personal.current_state.name || ''}}</text>
					</view>
					<!-- <view class="mt10 col3 fs26 col3 lh60">邮箱地址:<text class="pl10">{{resume.personal.email}}</text> -->
					<!-- </view> -->
					<!-- <view class="mt10 col3 fs26 col3 lh60">现居城市:<text class="pl10">{{resume.personal.current_address}}</text></view> -->
				</view>
				<view class="box1">
					<view class="upload_box">
						<view class="flex-box mb10">
							<view class=" fwb fs34 col3 mr20">生活照上传</view>
							<view class="flex-grow-1 fs24 col89">支持图片，pdf，word文档</view>
							<view @click="bindResumeFiles" class="edit_btn">
								<image src="https://admin.mosizp.cn/static/public/z_icon_add.png" mode="aspectFit"></image>
							</view>
						</view>

						<view class="flex-box flex-wrap">
							<view class="upload" v-for="(item,index) in resume.resume_files" :key="id">
								<image class="img1" v-if="item.file_ext == 'doc' || item.file_ext == 'docx'"
									src="https://admin.mosizp.cn/static/public/z_fie.jpg" mode="aspectFill" @click="bindViewFile(index)" />
								<image class="img1" v-else-if="item.file_ext == 'pdf'" src="https://admin.mosizp.cn/static/public/z_fie.jpg"
									mode="aspectFill" @click="bindViewFile(index)" />
								<image class="img1" v-else :src="item.file" mode="aspectFill" @click="bindViewImages(index)" />
							</view>
						</view>
						<view class="tip1">提示：上传个人生活照，有助于快速完成求职。平台发现有生活照比无生活照比，求职成功率提高85%（根据个人意愿上传）。</view>
					</view>
				</view>
				<view class="box1">
					<view class="flex-box lh48">
						<view class="flex-grow-1 fwb fs34 col3">求职意向<text style="color: red;">（必填）</text></view>
					</view>
					<view class="mt20" v-for="(item,index) in resume.job_intention">
						<view class="flex-box">
							<view class="fwb flex-grow-1 m-ellipsis fs30 col3 lh42 pr30"><text
									class="pr10">[{{item.fav_city && item.fav_city.name || ''}}]</text>{{item.fav_category && item.fav_category.category_name || ''}}
							</view>

							<view class="flex-box" @click="bindEditJobIntention(item)">
								<image :src="iconPath('edit.png')" mode="widthFix" class="ico24"></image>
								<view class="pl5 col2">编辑</view>
							</view>


						</view>
						<view class="mt10 col3 fs26 col3"><text class="pr10">{{item.expect_salary && item.expect_salary.name || ''}}/月</text>|<text
								class="pl10">{{item.job_type_text || ''}}</text>
						</view>

					</view>
					<view class="tc mt30">
						<view class="add_btn" @click="bindEditJobIntention()">+添加求职意向</view>
						<view class="fs24 col9 tc pt20 pb30">请添加你的期望城市、期望岗位等信息</view>
					</view>
				</view>

				<view class="box1">
					<view class="mb25 flex-box">
						<view class="flex-grow-1 fwb fs34 col3">工作经历</view>

					</view>
					<view class="teach_con">
						<view class="fs28 teach_item" v-for="(item,index) in resume.works">
							<view class="flex-box">
								<view class="flex-grow-1">
									<view class="col9">
										{{strReplace('-','/',item.start)}}-{{strReplace('-','/',item.end)}}
									</view>
									<view class="col3 ptb10">{{item.company_name}}</view>
									<view class="fs24 col9">{{item.job_title}}</view>
								</view>
								<view class="take_btn flex-box" @click="bindEditWork(item)">
									<image :src="iconPath('edit.png')" mode="widthFix" class="edit"></image>
									<view class="pl5">编辑</view>
								</view>

							</view>
							<view class="cir_tip">
								<image :src="iconPath('dot.png')" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="tc mt30">
						<view class="add_btn" @click="bindEditWork()">+添加工作经历</view>
						<view class="fs24 col9 tc pt20 pb30">请添加你的工作经历</view>
					</view>
				</view>
				<view class="box1">
					<view class="mb25 flex-box">
						<view class="flex-grow-1 fwb fs34 col3">教育经历</view>
					</view>
					<view class="teach_con">
						<view class="fs28 teach_item" v-for="(item,index) in resume.educations">
							<view class="flex-box">
								<view class="flex-grow-1">
									<view class="col9">
										{{strReplace('-','/',item.start)}}-{{strReplace('-','/',item.end)}}
									</view>
									<view class="col3 ptb10">{{item.school_name}}</view>
									<view class="fs24 col9">{{item.level && item.level.name || ''}} | {{item.major || ''}}</view>
								</view>
								<view class="take_btn flex-box" @click="bindEditEducation(item)">
									<image :src="iconPath('edit.png')" mode="widthFix" class="edit"></image>
									<view class="pl5">编辑</view>
								</view>

							</view>
							<view class="cir_tip">
								<image :src="iconPath('dot.png')" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="tc mt30">
						<view class="add_btn" @click="bindEditEducation()">+添加教育经历</view>
						<view class="fs24 col9 tc pt20 pb30">请添加你的教育经历、毕业学校等信息</view>
					</view>
				</view>
				<view class="box1">
					<view class="mb25 flex-box">
						<view class="flex-grow-1 fwb fs34 col3">专业技能</view>
					</view>
					<view>
						<view class="teach_con skill_con">
							<view class="fs28 teach_item" v-for="(item,index) in resume.skills">
								<view class="flex-box">
									<view class="col3 flex-grow-1 pb20">{{item.skill_name || ''}} - {{item.level && item.level.name || ''}}</view>
									<view @click="bindEditSkill(item)" class="take_btn">
										<image :src="iconPath('edit.png')" mode="widthFix"></image>
									</view>
									<view @click="bindDelModule('skill',item.id,'skills')" class="take_btn">
										<image :src="iconPath('del.png')" mode="widthFix"></image>
									</view>
								</view>
								<view class="cir_tip">
									<image :src="iconPath('dot.png')" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="tc mt30">
						<view @click="bindEditSkill()" class="add_btn">+添加专业技能</view>
						<view class="fs24 col9 tc pt20 pb30">请添加你的专业技能</view>
					</view>
				</view>
				<view class="box1">
					<view class="mb25 flex-box">
						<view class="flex-grow-1 fwb fs34 col3">个人标签</view>

					</view>
					<view>
						<view class="skill_btn m-ellipsis" v-for="(item,index) in resume.personal_tags">{{item.name || ''}}
						</view>
					</view>
					<view class="tc mt30">
						<view @click="bindEditPersonalTag()" class="add_btn">+编辑个人标签</view>
						<view class="fs24 col9 tc pt20 pb30">请添加你的个人标签</view>
					</view>
				</view>
				<view class="box1">
					<view class="mb25 flex-box">
						<view class="flex-grow-1 fwb fs34 col3">个人总结</view>
						<view class="flex-box">
							<image :src="iconPath('edit.png')" mode="widthFix" class="ico24"></image>
							<view class="pl5 col2" @click="bindEditSummary()">编辑</view>
						</view>
					</view>
					<view class="mb20 fs28 col3 lh40">
						<text>{{resume.summary && resume.summary.content || ''}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				resume: {
					personal: {
						avatar: '',
						realname: '',
						gender_text: '',
						age: '',
						current_address: '',
						work_experience: null,
						mobile: '',
						current_state: {
							name: ''
						}
					},
					resume_files: [],
					job_intention: [],
					works: [],
					educations: [],
					skills: [],
					personal_tags: [],
					summary: {
						content: ''
					},
					complete_percent: 0
				},
			}
		},
		onReady() {
			uni.setNavigationBarColor({

				frontColor: '#ffffff',

				backgroundColor: this.primaryColor()

			})
		},
		onLoad() {

			this.refresh();
		},
		methods: {
			refresh() {
				this.$core.get({
					url: '/xilujob.user/my_resume',
					success: (ret, response) => {
						if (ret.data && ret.data.resume) {
							// 确保所有必要的字段都有默认值
							const resumeData = ret.data.resume;
							if (!resumeData.personal) {
								resumeData.personal = {
									avatar: '',
									realname: '',
									gender_text: '',
									age: '',
									current_address: '',
									work_experience: null,
									mobile: '',
									current_state: {
										name: ''
									}
								};
							}
							if (!resumeData.personal.current_state) {
								resumeData.personal.current_state = { name: '' };
							}
							if (!resumeData.resume_files) resumeData.resume_files = [];
							if (!resumeData.job_intention) resumeData.job_intention = [];
							if (!resumeData.works) resumeData.works = [];
							if (!resumeData.educations) resumeData.educations = [];
							if (!resumeData.skills) resumeData.skills = [];
							if (!resumeData.personal_tags) resumeData.personal_tags = [];
							if (!resumeData.summary) resumeData.summary = { content: '' };

							this.resume = resumeData;
						}
					}
				});
			},
			bindEditPersonalInfo() {
				uni.navigateTo({
					url: '/pages/user/base_info',
					events: {
						dataTransfer: data => {
							this.resume.personal = data.model;
							this.resume.complete_percent = data.complete_percent;
							uni.$emit(app.globalData.Events.UcenterInfoCompleteChange, data.complete_percent);
						}
					},
					success: res => {
						res.eventChannel.emit('dataTransfer', {
							model: this.resume.personal
						});
					}
				});
			},
			//求职意向
			bindEditJobIntention(model) {
				uni.navigateTo({
					url: 'job_interest',
					events: {
						dataTransfer: data => {
							let job_intention = data.model,
								index = null,
								job_intentions = this.resume.job_intention;
							for (let i = 0; i < job_intentions.length; i++) {
								if (job_intentions[i].id == job_intention.id) {
									index = i;
									break;
								}
							}
							if (index === null) {
								job_intentions.push(job_intention);
							} else {
								job_intentions.splice(index, 1, job_intention);
							}
							job_intentions.sort((a, b) => {
								return a.start > b.start ? -1 : 1;
							});
							this.resume.job_intention = job_intentions;
							this.resume.complete_percent = data.complete_percent;
							uni.$emit(app.globalData.Events.UcenterInfoCompleteChange, data.complete_percent);
						},
						dataDelTransfer: data => {
							let job_intention = data.model,
								index = null,
								job_intentions = this.resume.job_intention;
							for (let i = 0; i < job_intentions.length; i++) {
								if (job_intentions[i].id == job_intention.id) {
									index = i;
									break;
								}
							}
							job_intentions.splice(index, 1);
							job_intentions.sort((a, b) => {
								return a.start > b.start ? -1 : 1;
							});
							this.resume.job_intention = job_intentions;
							this.resume.complete_percent = data.complete_percent;
							uni.$emit(app.globalData.Events.UcenterInfoCompleteChange, data.complete_percent);
						}
					},
					success: res => {
						res.eventChannel.emit('dataTransfer', {
							model: model || {}
						});
					}
				});
			},
			//工作经历
			bindEditWork(model) {
				uni.navigateTo({
					url: 'work_experience',
					events: {
						dataTransfer: data => {
							let work = data.model,
								index = null,
								works = this.resume.works;
							for (let i = 0; i < works.length; i++) {
								if (works[i].id == work.id) {
									index = i;
									break;
								}
							}
							if (index === null) {
								works.push(work);
							} else {
								works.splice(index, 1, work);
							}
							works.sort((a, b) => {
								return a.start > b.start ? -1 : 1;
							});
							this.resume.works = works;
							this.resume.complete_percent = data.complete_percent;
							uni.$emit(app.globalData.Events.UcenterInfoCompleteChange, data.complete_percent);
						},
						dataDelTransfer: data => {
							let work = data.model,
								index = null,
								works = this.resume.works;
							for (let i = 0; i < works.length; i++) {
								if (works[i].id == work.id) {
									index = i;
									break;
								}
							}
							works.splice(index, 1);
							works.sort((a, b) => {
								return a.start > b.start ? -1 : 1;
							});
							this.resume.works = works;
							this.resume.complete_percent = data.complete_percent;
							uni.$emit(app.globalData.Events.UcenterInfoCompleteChange, data.complete_percent);
						}
					},
					success: res => {
						res.eventChannel.emit('dataTransfer', {
							model: model || {}
						});
					}
				});
			},
			//教育经历
			bindEditEducation(model) {
				uni.navigateTo({
					url: 'education',
					events: {
						dataTransfer: data => {
							let education = data.model,
								index = null,
								educations = this.resume.educations;
							for (let i = 0; i < educations.length; i++) {
								if (educations[i].id == education.id) {
									index = i;
									break;
								}
							}
							if (index === null) {
								educations.push(education);
							} else {
								educations.splice(index, 1, education);
							}
							educations.sort((a, b) => {
								return a.start > b.start ? -1 : 1;
							});
							this.resume.educations = educations;
							this.resume.complete_percent = data.complete_percent;
							uni.$emit(app.globalData.Events.UcenterInfoCompleteChange, data.complete_percent);
						},
						dataDelTransfer: data => {
							let education = data.model,
								index = null,
								educations = this.resume.educations;
							for (let i = 0; i < educations.length; i++) {
								if (educations[i].id == education.id) {
									index = i;
									break;
								}
							}
							educations.splice(index, 1);
							educations.sort((a, b) => {
								return a.start > b.start ? -1 : 1;
							});
							this.resume.educations = educations;
							this.resume.complete_percent = data.complete_percent;
							uni.$emit(app.globalData.Events.UcenterInfoCompleteChange, data.complete_percent);
						}
					},
					success: res => {
						res.eventChannel.emit('dataTransfer', {
							model: model || {}
						});
					}
				});
			},
			//个人标签
			bindEditPersonalTag() {
				uni.navigateTo({
					url: 'personal_labels',
					events: {
						dataTransfer: data => {
							this.resume.personal_tags = data.model;
							this.resume.complete_percent = data.complete_percent;
							uni.$emit(app.globalData.Events.UcenterInfoCompleteChange, data.complete_percent);
						}
					},
					success: res => {
						res.eventChannel.emit('dataTransfer', {
							model: this.resume.personal_tags
						});
					}
				});
			},
			//技能图片
			// bindEditSkill() {
			// 	let that = this;
			// 	uni.chooseImage({
			// 		count: 9,
			// 		success: res => {
			// 			let file = res.tempFiles[0];
			// 			console.log(res);
			// 			//#ifdef MP-WEIXIN
			// 			that.$core.uploadFile({
			// 				filePath: file.path,
			// 				success: (ret, response) => {
			// 					that.$core.post({
			// 						url: 'xilujob.user/save_module',
			// 						data: {
			// 							image: ret.data.url,
			// 							module: 'skill'
			// 						},
			// 						success: ret => {
			// 							//this.getOpenerEventChannel().emit('dataTransfer', {model: ret.data.model, complete_percent:ret.data.complete_percent});
			// 							that.resume.skills.push(ret.data.model);
			// 							that.resume.complete_percent = ret.data
			// 								.complete_percent
			// 							uni.$emit(app.globalData.Events
			// 								.UcenterInfoCompleteChange, ret.data
			// 								.complete_percent);
			// 						}
			// 					});
			// 				}
			// 			});
			// 			//#endif
			// 		}
			// 	});
			// },
			//荣誉图片
			bindEditAward() {
				let that = this;
				uni.chooseImage({
					count: 1,
					success: res => {
						let file = res.tempFiles[0];
						//#ifdef MP-WEIXIN
						that.$core.uploadFile({
							filePath: file.path,
							success: (ret, response) => {
								that.$core.post({
									url: 'xilujob.user/save_module',
									data: {
										image: ret.data.url,
										module: 'award'
									},
									success: ret => {
										//this.getOpenerEventChannel().emit('dataTransfer', {model: ret.data.model, complete_percent:ret.data.complete_percent});
										that.resume.awards.push(ret.data.model);
										that.resume.complete_percent = ret.data
											.complete_percent
										uni.$emit(app.globalData.Events
											.UcenterInfoCompleteChange, ret.data
											.complete_percent);
									}
								});
							}
						});
						//#endif
					}
				});
			},
		bindEditSummary() {
				uni.navigateTo({
					url: 'write_appraise',
					events: {
						dataTransfer: data => {
							this.resume.summary = data.model;
							this.resume.complete_percent = data.complete_percent;
							uni.$emit(app.globalData.Events.UcenterInfoCompleteChange, data.complete_percent);
						}
					},
					success: res => {
						res.eventChannel.emit('dataTransfer', {
							model: this.resume.summary
						});
					}
				});
			},
			bindEditSkill(item) {
				uni.navigateTo({
					url: '/pages/user/skill',
					events: {
						dataTransfer: data => {
							let skill = data.model,
								index = null,
								skills = this.resume.skills;
							for (let i = 0; i < skills.length; i++) {
								if (skills[i].id == skill.id) {
									index = i;
									break;
								}
							}
							if (index === null) {
								skills.push(skill);
							} else {
								skills.splice(index, 1, skill);
							}
							this.resume.skills = skills;
							this.resume.complete_percent = data.complete_percent
							uni.$emit(app.globalData.Events.UcenterInfoCompleteChange, data.complete_percent);
						}
					},
					success: res => {
						res.eventChannel.emit('dataTransfer', {
							model: item || {}
						});
					}
				});
			},
			//删除
			bindDelModule(module, id, listKey) {
				let page = this;

				uni.showModal({
					title: '提示',
					content: '确认删除？',
					success: res => {
						if (res.confirm) {
							page.$core.post({
								url: 'xilujob.user/del_module',
								data: {
									module: module,
									id: id
								},
								success: ret => {
									let list = page.resume[listKey],
										index = null;
									for (let i = 0; i < list.length; i++) {
										if (list[i].id == id) {
											index = i;
											break;
										}
									}
									if (index !== null) {
										list.splice(index, 1);
										page.resume[listKey] = list;
									}
									page.resume.complete_percent = ret.data.complete_percent;
									uni.$emit(app.globalData.Events.UcenterInfoCompleteChange, ret
										.data.complete_percent);
								}
							})
						}
					}
				})
			},
			//简历附件
			bindResumeFiles() {
				uni.navigateTo({
					url: '/pages/user/resume_files',
					events: {
						dataTransfer: data => {
							this.resume.resume_files = data.model
							uni.$emit(app.globalData.Events.UcenterInfoCompleteChange, data.complete_percent);
						}
					},
					success: res => {
						res.eventChannel.emit('dataTransfer', {
							model: this.resume.resume_files
						});
					}
				})
			},
			bindViewImages(index) {
			
				uni.previewImage({
					urls: [this.resume.resume_files[index].file],
					current: this.resume.resume_files[index].file
				})
			},
			
			bindViewFile(index) {
				let url = this.resume.resume_files[index].file;
				uni.downloadFile({
					// 示例 url，并非真实存在
					url: url,
					success: function(res) {
						const filePath = res.tempFilePath
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log('打开文档成功')
							}
						})
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page-head {
		width: 750rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: var(--primary);
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.pt88 {
		padding-top: 88rpx;
	}

	.box1 {
		margin-top: 20rpx;
		padding: 40rpx 30rpx 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		width: 690rpx;

		.user_img {
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
		}
	}

	.teach_item {
		padding-left: 40rpx;
		padding-bottom: 40rpx;
		position: relative
	}

	.cir_tip image {
		width: 22rpx;
		height: 22rpx;
		display: block
	}

	.cir_tip {
		position: absolute;
		top: 10rpx;
		left: 0
	}

	.teach_item::before {
		content: '';
		position: absolute;
		left: 12rpx;
		top: 32rpx;
		bottom: -10rpx;
		background-color: #E1E1E1;
		width: 1rpx;
		display: block
	}

	.teach_item:nth-last-child(1)::before {
		display: none
	}

	.add_btn {
		border: 2rpx solid var(--primary);
		font-size: 26rpx;
		color: var(--primary);
		line-height: 70rpx;
		border-radius: 35rpx;
		display: inline-block;
		padding: 0 42rpx;
		background: none;
		position: static;
		width: auto;
		height: auto;
		box-shadow: none
	}

	.pb50 {
		padding-bottom: 50rpx;
	}

	.take_btn {
		padding-left: 30rpx;
		padding-bottom: 30rpx;
		padding-top: 10rpx;
		align-self: flex-start;
		font-size: 28rpx;
		color: var(--primary);
	}

	.take_btn image {
		width: 24rpx;
		height: 24rpx;
		display: block
	}

	.skill_btn {
		width: 190rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #F5F5F5;
		border-radius: 8rpx;
		display: inline-block;
		vertical-align: top;
		font-size: 27rpx;
		color: #666666;
		margin-bottom: 20rpx;
		margin-right: 30rpx;
		text-align: center;

		&:nth-of-type(3n) {
			margin-right: 0;
		}
	}

	.upload_item {
		margin-bottom: 20rpx;
		margin-right: 30rpx;
		width: 190rpx;
		height: 190rpx;
		display: inline-block;
		vertical-align: top;
		position: relative;
		border-radius: 12rpx;

		&:nth-of-type(3n) {
			margin-right: 0;
		}

		.upload_img {
			width: 100%;
			height: 100%;
			display: block;
			border-radius: 12rpx;
		}

		.upload_del {
			width: 45rpx;
			height: 45rpx;
			position: absolute;
			top: 12rpx;
			right: 12rpx;
			z-index: 2;
		}
	}

	.add_btn {
		border: 2rpx solid var(--primary);
		font-size: 26rpx;
		color: var(--primary);
		line-height: 70rpx;
		border-radius: 35rpx;
		display: inline-block;
		padding: 0 42rpx;
		background: none;
		position: static;
		width: auto;
		height: auto;
		box-shadow: none
	}


	.upload_box .icon_add {
		display: block;
		width: 30rpx;
		height: 30rpx;
	}

	.upload_box .upload {
		position: relative;
		margin: 0 30rpx 20rpx 0;
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.upload_box .img1 {
		display: block;
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.upload_box .icon_close {
		position: absolute;
		right: -16rpx;
		top: -16rpx;
		display: block;
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
	}

	.upload_box .tip1 {
		font-size: 24rpx;
		color: var(--primary);
		line-height: 36rpx;
	}

	.edit_btn {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #2FC971;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.edit_btn image {
		width: 21rpx;
		height: 23rpx;
		display: block;
		margin-right: 6rpx;
	}
</style>